<template>
  <grimm-page type="table-view" title="table">
    <template slot="content">
      <grimm-table
        :tableData="tableData"
        :tableColumn="tableColumn"
      > 
      </grimm-table>
    </template>
  </grimm-page>
</template>
<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      tableData: [
        {
          months: '1',
          money: 222,
          abhName: 333,
          zone: 1000,
        },
        {
          months: '2',
          money: 222,
          abhName: 333,
          zone: 2000,
        },
        {
          months: '3',
          money: 222,
          abhName: 333,
          zone: 3000,
        },
        {
          months: '4',
          money: 222,
          abhName: 333,
          zone: 4000,
          name: 5000,
        },
      ],
      tableColumn: [
        {
          title: '自然月',
          dataIndex: 'months',
          width: 70,
          align: 'center',
        },
        {
          title: 'AMG (元)',
          dataIndex: 'money',
          width: 85,
          align: 'left',
        },
        {
          title: 'ABH人员',
          dataIndex: 'abhName',
          width: 85,
          align: 'left',
        },
        {
          title: 'zone',
          dataIndex: 'zone',
          width: 85,
          align: 'left',
          cell: (row, column, index) => {
            console.log(row, column, index);
            // 目前仅支持原生dom 渲染，无法注册方法
            return `<span style="color: ${row.zone > 3000 ? 'red' : ''}">${row.zone}</span><br>
                    <span v-show="${row.name}">${row.name}</span>`;
          }
        },
      ],
    }
  },
  methods: {
  }
};
</script>
<style lang="stylus" scoped>

</style>
